<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSX练习</title>
</head>
<body>
  
  <div id="test"></div>
  
  <!--
      注意区分：【js语句】 与 【js表达式】:
        1.表达式：一个表达式会产生一个值,它可以放在任何需要一个值的地方
          举例：a
               3 + b
               demo("a", "b")
               arr.map()
               .....
        2.语句：语句可以理解成一个行为.循环语句、if语句，都是典型的语句
          举例：
               function foo() {}-----属于表达式
               if(){}
               for(){}
               ......
  -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script  type="text/babel">
  // 准备一些数据
  let data = ['Angular','React','vue']   // 数据的数组
  // let data2 = [<li>Angular</li>,<li>React</li>,<li>vue</li>]   // 标签数组
    //1. 创建虚拟DOM
    let vDOM = (
      <div>
        <h2>前端js 框架列表</h2>
        <ul>  
            {/* 把数据的数组加工成标签的数组 */}
            {
              data.map((item,index) => {
                /* 我们暂时使用index 作为child 的key   但是这种写法某些时候会产生一些问题*/ 
                return <li key = {index}>{item}</li>
              })
            }
           
        </ul>
      </div>
    )

    // 2.渲染虚拟DOM到页面
    ReactDOM.render(vDOM,document.getElementById('test'))
  </script>

</body>
</html>
